@charset "UTF-8";
body  {
	font: 76% Verdana, Arial, Helvetica, sans-serif;
	background: #fff;
	margin: 0; 
	padding: 0;
	color: #000000;
}
/* general styles for specific elements */
a img { border:none;}
a:link {color:#334D99;}
a:hover {color:#006;}


/* layout */
#header {
	background: url(../images/header_bkg.jpg) right no-repeat;
	border-bottom: 1px solid #006;
	padding: 0;
	height: 94px;
}
#container { 
	width: 100%;  
	background: #FFFFFF;
	margin: 0px; 
	text-align: left; /* overrides the text-align: center on the body element */
	padding-bottom: 0px;
	background: url("../images/content_bkg.png") repeat-y right;
} 

/*#sidebar1 {
	float: left; 
	width: 100px; 
	background: #fff url(../images/sidebar_border.png) right repeat-y; 
	padding: 0px; 
}
#sidebar1 h3, #sidebar1 p {
	margin-left: 5px; 
	margin-right: 5px;
	color: #003;
}
#sidebar1 #side_footer {
	background: url(../images/sidebar_end.png) right no-repeat;
	height: 20px;
}
*/
#tabmenu {
	float: left; 
	width: 100%;
	background: url(../images/tabmenu_bkg.jpg) repeat-x;
	border-bottom: 1px solid #006;
	padding: 0px;
	margin: 0px;
	}

#menu {
	color: #334D99;
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu li {
	float: left;
	margin: 0;
	padding: 0;
	background:url("../images/menutab_r.png") no-repeat right top;
	margin-top: 5px;
	} 
#menu a {
	display: block;
	padding: 3px 10px;
	background:url("../images/menutab_l.png") no-repeat left top;
	text-decoration: none;
	color: #006;
	}

#menu li.selected {/*selected tab*/
    background: url("../images/menutab_sel_r.png") no-repeat right top;
}

#menu li.selected a {/*selected tab*/
    background: url("../images/menutab_sel_l.png") no-repeat left top;
    font-weight: bold;
} 

#menu li:hover {
	background: url("../images/menutab_rol_r.png") no-repeat right top;
}

#menu li a:hover {
	background: url("../images/menutab_rol_l.png") no-repeat left top;
}

#content { 
	margin: 0 20px; 
	clear: left;
} 

#content h1 {
	font-size: 2em;
	font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;
	color: #006;
}
#content h2 {
	font-size: 1.5em;
	}
#content h3 {
	font-size: 1em;
	font-weight: bold;
	}
#content ul li, #content ol li {
	margin-bottom: 4px;
	}
#content p {
	width: 650px;
	}
	
#footer {
	text-align:center;
	font-size:.9em;
	color:#666;
	background: #fff;
	padding: 5px;
	border-top: 2px solid #006;
	margin-top: 10px
	}

/* Miscellaneous classes for reuse */
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.center {
	text-align: center;
	}
.embiggen {
	font-size: 1.2em;
	font-weight: bold;
	}
.downplay {
	font-size: .9em;
	color: #666;
	}
.qualify { /* add to headers like a subtitle */
	font-style: italic;
	font-size: .8em;
	}
	
/* Classes & ID's for specific content */
#logos {
	margin: 5px auto;
	}
#logos td img {
	margin: 0px 2px;
	}
#permalink {
	font-size: .75em;
	}
/*
#maptable {
	width: 100%;
	}
*/  
#maptable td {
	vertical-align: top;
	}
#helpbar {
  font-family: Arial, Helvetica, sans-serif;
  padding: 5px;
  text-align: left;
                
}
/* The rollover box is populated by another HTML table we get from mapserver. So this styling deals specifically with it, not the table column
   the HTML payload resides in.
*/   

#rolloverbox table {
	border-collapse: collapse;
	}

#rolloverbox th{
    font-family: Arial, Helvetica, sans-serif;
    overflow:hidden;
    font-size: 1.0em;   
    text-align: left;
    color:#000;
    border-top: 1px solid #ccc;
                      
}
#rolloverbox caption{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0em;   
    text-align: left;
    color:#c00;                  
}
#rolloverbox td{
    width: 350px;
    font-size: 1.0em;
    font-family: Arial, Helvetica, sans-serif;
    overflow:hidden;
    /*font-size: 0.8em;*/
    text-align: left;
    color:#333;
    border-top: 1px solid #ccc;        
}
#rolloverbox {
    color:#000040;
    overflow: scroll;
    height: 400px;
}
#rolloverbox * {
	padding: 2px;
	}
	
#rolloverbox hr {
	display: none;
	}
	
#rolloverbox .holder {
	border-bottom: 1px solid #333;
	}
  
#rollOver {
  width: 350px;
  border:1px solid #000066;
}

#map {
    width: 500px;
    height: 400px;
    border: 1px solid black;
    /*left:210px; 
    top:50px;*/
                 
}
  
#layerSwitch {
  width: 250px;
  border:1px solid #000066;
}	
#stations {
	border-collapse: collapse;
	border: 1px solid #333;
	margin: 0px auto;
	}
#stations caption {
	font-size: 1.5em;
	color: #006;
	font-weight: bold;
	margin: 3px auto;
	}
#stations th, #stations td {
	margin: 0px;
	padding: 3px;
	}
#stations th {
	background-color: #ffe67f;
	}

/* survey form */
#survey {
	border-collapse: collapse;
	border: 1px solid #333;
	margin: 0px auto;
	}
#survey caption {
	font-size: 1.5em;
	color: #006;
	font-weight: bold;
	margin: 3px auto;
	}
#survey th, #survey td {
  text-align: left;
  vertical-align: top;
	margin: 0px;
	padding: 3px;
	border-top: 1px solid #333;
	}
#survey td td { border: none;}
#survey th {
	background-color: #ffe67f;
	text-align: right;
	width: 200px;
	}
	
#alerts {
	border: 1px solid #333;
	padding: 0px 5px;
	width: 675px;
	margin: 0px auto;
	background-color: #fff3bf;
	}
#alerts ul {
	display: inline;
	list-style-type: none;
	margin-left: 0px;
	}
#alerts ul li {
	margin-top: 8px;
	margin-bottom: 8px;
	text-indent: 0px;
	}
#alerts .fieldInfo {
	font-size: .9em;
	width: 300px;
	}
#alerts label {
	font-weight: bold;
	}
  
/* some basic table styles */

table.horiz { /* for tables with th on the left */
	margin: 0px auto;
	border-collapse: collapse;
	}
	
table.horiz td, table.horiz th {
	vertical-align: top;
	padding: 3px;
	}
table.horiz th {
	text-align: right;
	}

table.vert { /* for tables with th across the top */
	margin: 0px auto;
	border-collapse: collapse;
	}

table.vert td, table.vert th {
	padding: 3px;
	}

table.vert th {
	text-align: center;
	vertical-align: bottom;
	border-bottom: 1px solid;
	}
	
